<template>
  <div class="code-address">
    <div class="header">
      <div class="detail-title">
        <div class="left">
          <div style="display: flex;flex-direction: column">
            <div>
              <span class="task-name">统一地址管理</span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="card">
            <div class="card-top">
              匹配前数量
            </div>
            <div class="card-bottom">
              <span class="number">230</span>
              条
            </div>

          </div>
          <div class="aPartition"></div>
          <div class="card">
            <div class="card-top">
              匹配后数量
            </div>
            <div class="card-bottom">
              <span class="number">441</span>
              条
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="left-tree">
      <el-scrollbar style="height:100%" class="hidden-x">
        <district-tree @clickValue="clickValue"></district-tree>
      </el-scrollbar>
    </div>
    <div class="content">
      <div class="query-table">
        <el-form class="el-row" label-width="110px">
          <!-- <el-form-item label="数据范围：" class=" el-col-5">
            <district-select v-model="dataRange" />
          </el-form-item> -->
          <el-form-item label-width="0" class=" el-col-20">
            <el-input style="width:200px;margin-right:10px" placeholder="请输入地址信息" v-model="name"></el-input>
            <el-button type="primary" @click="queryTable('')">查询</el-button>
            <el-button v-show="!showReplace" type="primary" @click="showReplace = true">一码多址替换</el-button>
            <div class="replace-div" v-show="showReplace">
              <!-- <el-select v-model="replaceForm.key">
                <el-option v-for="(item,i) in replaceField" :label="item.name" :value="item.value">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
              </el-select>
              <el-input v-model="replaceForm.name" placeholder="需要替换的词"></el-input>
              替换为 -->
              <el-input v-model="replaceForm.value" placeholder="替换之后的词"></el-input>
              <el-button type="primary" clearble @click="replaceMethod">替换</el-button>
            </div>

          </el-form-item>
          <!-- <el-form-item label-width="0" class=" el-col-18 el-col-offset-1">
           
          </el-form-item> -->
        </el-form>
        <el-table :data="taskTableData" header-row-class-name="table-header" height="550" stripe :span-method="objectSpanMethod">
          <el-table-column align="center" label="序号" fixed="left" type="index"></el-table-column>
          <el-table-column align="center" label="统一地址编码" fixed="left" prop="tysbdm" width="200"></el-table-column>
          <el-table-column align="center" label="地址名称" fixed="left" prop="tydzmc" width="300"></el-table-column>
          <el-table-column align="center" label="省" prop="shengmc"></el-table-column>
          <el-table-column align="center" label="市" prop="shimc"></el-table-column>
          <el-table-column align="center" label="区" prop="qumc"></el-table-column>
          <el-table-column align="center" label="街道" prop="jdmc"></el-table-column>
          <el-table-column align="center" label="社区" prop="sqmc"></el-table-column>
          <el-table-column align="center" label="门牌号" prop="mph"></el-table-column>
          <el-table-column align="center" label="小区" prop="xqmc"></el-table-column>
          <el-table-column align="center" label="建筑物" prop="jzw"></el-table-column>
          <el-table-column align="center" label="楼牌号" prop="ldmc"></el-table-column>
          <el-table-column align="center" label="单元" prop="dyh"></el-table-column>
          <el-table-column align="center" label="楼层" prop="floor"></el-table-column>
          <el-table-column align="center" label="户室" prop="fjhm"></el-table-column>
          <el-table-column align="center" label="行政区编码" prop="user"></el-table-column>
          <el-table-column align="center" label="一码多址匹配" prop="ymdzpp" fixed="right" width="300"></el-table-column>

        </el-table>
        <el-pagination :page-size="page.size" :total="total" background layout="total,prev, pager, next" style="text-align: right;margin-top: 12px" @current-change="pageChange"></el-pagination>
      </div>
      <!-- <el-dialog title="一码多址替换" :visible.sync="dialogVisible" :close-on-click-modal="false">
        <replace-dialog v-if="dialogVisible" @closeDialog="closeDialog"></replace-dialog>
      </el-dialog> -->
    </div>

  </div>
</template>

<script>
import districtTree from '../districtTree.vue'
import districtSelect from '../districtSelect.vue'
import replaceDialog from './replacedialog.vue'

import { getAllList, replaceWord } from '@/api/oneCodeAddress'
export default {
  data () {
    return {
      rowData: {
        name: '0',
        user: '李建',
        unit: '省政务服务和数据管理局',
        createTime: '',
        range: '宝塔社区'
      },
      page: {
        page: 1,
        size: 10
      },
      name: '',
      total: 89,
      taskTableData: [],
      dataRange: [],
      dialogVisible: false,
      shimc: '',
      qmc: '',
      showReplace: false,
      replaceForm: {
        value: ''
      },
      replaceField: [
        {
          name: '省',
          value: 'shengmc'
        }, {
          name: '市',
          value: 'shimc'
        }, {
          name: '区',
          value: 'qumc'
        }, {
          name: '街道',
          value: 'jdmc'
        }, {
          name: '社区',
          value: 'sqmc'
        }, {
          name: '门牌号',
          value: 'mph'
        }, {
          name: '小区',
          value: 'xqmc'
        }, {
          name: '建筑物',
          value: 'jzw'
        }, {
          name: '单元',
          value: 'dyh'
        }, {
          name: '楼牌号',
          value: 'ldmc'
        }, {
          name: '楼层',
          value: 'floor'
        }, {
          name: '户室',
          value: 'fjhm'
        }, {
          name: '地址',
          value: 'originalAddress'
        },
      ],
      rowspanMap: {},
    }
  },
  methods: {
    pageChange (pageNum) {
      this.page.page = pageNum
      this.queryTable('')
    },
    clickValue (data) {
      if (data === '黄冈市') {
        this.shimc = '黄冈市'
        this.qmc = ''
      } else {
        this.shimc = ''
        this.qmc = data
      }
      this.queryTable('')
    },
    async queryTable (key = '') {
      const req = {
        ...this.page,
        shimc: this.shimc,
        qmc: this.qmc,
        name: key ? key : this.name
      }
      const res = await getAllList(req)
      if (res.status === 200) {
        this.taskTableData = res.data.records
        this.total = res.data.total
        this.calculateRowspan()
      } else {
        this.taskTableData = []
        this.total = 0
      }
    },
    closeDialog () {
      this.dialogVisible = false
    },
    async replaceMethod () {
      if (!this.name) {
        this.$message.warning('请输入地址信息！')
        return
      }
      let confirm = this.$confirm('是否进行一码多址替换', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if (confirm) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        setTimeout(async () => {
          loading.close()
          let req = {
            name: this.name,
            tydzmc: this.replaceForm.value,
          }
          const res = await replaceWord(req)
          if (res.status === 200) {

            this.queryTable(this.replaceForm.value)
            this.$message.success('替换成功')
          } else {
            this.$message.error('替换失败')
          }
        }, 3000);
      }
    },
    calculateRowspan () {
      let map = {};
      let data = this.taskTableData;
      let currentName = '';
      let rowspan = 1;
      for (let i = 0; i < data.length; i++) {
        if (data[i].tysbdm !== currentName) {
          currentName = data[i].tysbdm;
          rowspan = 1;
          map[i] = rowspan;
        } else {
          map[i - rowspan] = ++rowspan;
          map[i] = 0;
        }
      }
      this.rowspanMap = map;
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 2) {
        return {
          rowspan: this.rowspanMap[rowIndex],
          colspan: this.rowspanMap[rowIndex] > 0 ? 1 : 0
        };
      }
    }
  },
  created () {

    // this.queryTable()
  },
  components: {
    districtTree, districtSelect, replaceDialog
  }
}
</script>

<style lang="less">
.code-address {
  .el-tree {
    padding: 10px;
    .el-tree-node__label {
      font-size: 16px;
    }
    .el-tree-node__content {
      height: 45px;
    }
  }
}
.table-header {
  th {
    background: #e5ebf3 !important;
  }
  .cell {
    color: #333 !important;
  }
}

.hidden-x .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.replace-div {
  display: inline-block;
  margin-left: 5px;
  .el-input {
    margin: 0 10px;
    width: 180px;
  }
}
</style>


<style lang="less" scoped>
@import url("../main.less");

.code-address {
  position: relative;
  height: 100%;
  width: 100%;

  .header {
    position: absolute;
    left: 0;
    height: 150px;
    width: 100%;
  }
  .left-tree {
    position: absolute;
    left: 0;
    top: 130px;
    height: calc(100% - 130px);
    width: 250px;
    background-color: #fff;
    border-radius: 10px;
  }
  .content {
    position: absolute;
    width: calc(100% - 260px);
    top: 130px;
    height: calc(100% - 130px);
    bottom: 0;
    right: 0;
    background-color: #fff;
    border-radius: 10px;
  }
}
</style>